<template>
    <slot v-if="hasPermission"></slot>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import eventBus from '../eventBus'; 
// 定义props
const props = defineProps({
    permission: {
        type: String,
        required: true,
    },
});
// 用户权限列表
const userPermissions = ref(['sys:user:add','sys:user:edit','sys:user:del']);
// 监听事件
const handleUserChanged = (permissions) => {
    userPermissions.value = permissions;
    // console.log(userPermissions.value);

};
// 组件挂载时注册事件监听
onMounted(() => {
    eventBus.on('user-changed', handleUserChanged);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
    eventBus.off('user-changed', handleUserChanged);
});
// 计算属性：判断是否有权限
const hasPermission = computed(() => userPermissions.value.includes(props.permission));


</script>